<template lang="pug">
  modal-form(
    title="违规视频添加"
    :visible.sync="visibleDialog"
    width="640px"
    :formItems="items"
    :submitting="submitting"
    :formSubmit="submitHandle"
    @close="$_handleCancel"
  )
    el-alert.warningBox(type="warning" :closable="false" slot="alert")
      h3 添加步骤及说明
      div.c_regular
        p 1. 完成业务发生时间、上传时间、拍摄位置、违规类型的填写或选择
        p 2. 点击上传视频按钮，选择电脑本地视频文件后进行上传；
        p 3.仅支持
          span(class="c_warning") MP4
          | 格式视频，且单个文件不超过
          span(class="c_warning") 500M;
        p 4.上传完成并点击提交，该视频即进入到违规视频库内，可随时查看。
</template>
<script>
import { ModalForm } from '@/components'
import { volaVideoSave } from '@/api/libary'

export default {
  components: {
    ModalForm
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    items () {
      return [
        {
          key: 'videoBegntime',
          label: '发生时间',
          type: 'datetime',
          formatFlag: true,
          rules: [{ required: true, message: '请选择' }],
          layoutCol: { sm: 12, md: 12, lg: 12 }
        },
        {
          key: 'orgIds',
          label: '所在机构',
          type: 'orgselect',
          selectType: 2,
          rules: [{ required: true, message: '请选择' }],
          layoutCol: { sm: 12, md: 12, lg: 12 }
        },
        {
          key: 'volaType',
          label: '违规类型',
          type: 'selectdict',
          dictKey: 'SCEN_VOLA_TYPE',
          rules: [{ required: true, message: '请选择' }],
          layoutCol: { sm: 12, md: 12, lg: 12 }
        },
        {
          key: 'remarks',
          label: '备注',
          type: 'textarea',
          placeholder: '（非必填）可进一步针对违规信息进行说明等，不超过200个字符',
          maxlength: 200,
          'show-word-limit': true
        },
        {
          key: 'videoUrl',
          label: ' ',
          type: 'upload',
          btnText: '上传视频',
          // accept: '.mp4',
          limitSize: 500,
          rules: [{ required: true, message: '请选择' }],
          suffix: '（仅支持MP4视频格式）'
        }
      ]
    }
  },
  data () {
    return {
      submitting: false
    }
  },
  methods: {
    // 保存提交
    submitHandle (vals) {
      console.log(vals)
      const params = {
        ...vals,
        medinsId: vals.orgIds[0],
        deptId: vals.orgIds[1],
        videoUrl: vals.videoUrl[0].url
      }
      delete params.orgIds
      console.log(params)
      this.submitting = true
      volaVideoSave(params).then(() => {
        this.$message.success('添加成功')
        this.$_handleCancel()
        this.$emit('getList')
      }).finally(() => {
        this.submitting = false
      })
    },
    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
.warningBox{
  padding: 12px;
  margin-bottom: 20px;
  p {
    line-height: 1.8
  }
}
</style>
